<template>
  <div class="clientinfo" >
    <!-- input搜索框 -->
    <div class="top" >
      <input
        placeholder="请输入查询内容"
         v-model="inputvale"
        :style="{
          width: '560px',
          height: '50px',
          border: ' 1px solid skyblue',
        }"
        clearable
      />
      <el-button type="warning"
      :style="{ width: '80px', height: '53px' }"
      plain
      @click="handlesearch"
        >搜索</el-button
      >
    </div>
    <!-- 表格 -->

    <el-table :data="users" style="width: 100% " align= "center" >
      <hr>
      <el-table-column label="客户名称"  align= "center" prop="name" width="160"> </el-table-column>
      <el-table-column label="联系人名称" align= "center" prop="telname" width="100">
      </el-table-column>
      <el-table-column label="所属行业"   align= "center" prop="hangye"> </el-table-column>
      <el-table-column label="国别"  align= "center"  prop="coutry"> </el-table-column>
      <el-table-column label="所在地"   align= "center" prop="address" width="100">
      </el-table-column>
      <el-table-column label="邮编"   align= "center" prop="zip"> </el-table-column>
      <el-table-column label="电话"   align= "center" prop="phone" width="140"> </el-table-column>
      <el-table-column label="手机"   align= "center" prop="tel" width="120"> </el-table-column>
      <el-table-column label="标签联系人"   align= "center" prop="tag" width="100">
      </el-table-column>
      <el-table-column label="沟通记录"   align= "center" prop="info" width="100">
      </el-table-column>
    <!-- <el-table-column
      align="right">
      <template slot="header" >
     操作
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete">删除</el-button>
      </template>
    </el-table-column> -->
    </el-table>

  </div>
</template>

<script>
import { GetClientInfo } from '../../api/client/clientinfo'
export default {
  name: 'clientinfo',
  data() {
    return {
      users: [],
      inputvale: '',
      // removelist: [],
      list: [],
    }
  },
  async created() {
    const res = await GetClientInfo()
    this.users = res.data.data.list
    // console.log('打印打印', res.data.data)
  },
  methods: {
    handlesearch() {
      if (this.inputvale) {
        // console.log(this.users)
        const res1 = this.users
        const arr = res1.filter(item => {
          item.id = ''
          return JSON.stringify(item).includes(this.inputvale)
        })
        this.users = arr
      }
    },
    // handleDelete() {
    //   this.removelist.forEach(item => {
    //     this.users = this.users.filter(group => {
    //       return group.id !== item.id
    //     })
    //   })
    //   console.log(this.removelist)
    // },

  },
}
</script>

<style lang='less' scoped>
.top {
  display: flex;
  width: 100%;
  justify-content: center;
}
</style>
